<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:400px;height:200px;border:solid 1px black;margin:10px auto;position: relative;background: #ccc;overflow:hidden}
        
        .imgbox .item{width:400px;height:200px;font-size: 80px;line-height:200px;text-align:center;position: absolute;left:400px;top:0;}

        .item:nth-child(1){background: #399;}
        .item:nth-child(2){background: #393;}
        .item:nth-child(3){background: #993;}
        .item:nth-child(4){background: #939;}
        .item:nth-child(5){background: #339;}

        .btns input{position: absolute;width:40px;height:40px;top:80px;}
        #left{left:0;}
        #right{right:0;}

        .list{height:20px;position: absolute;bottom:0;left:0;right:0;display: flex;justify-content: center;}
        .list span{width:20px;height:20px;margin: 0 20px;text-align:center;line-height:20px;color: #fff;font-size:12px;background: rgba(200,200,200,0.6);border-radius:50%;cursor: pointer;}
        .list span.active{background: red;}
    </style>
</head>
<body>
    <div class="box">
        <div class="imgbox">
            <div class="item">0</div>
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
        </div>
        <div class="btns">
            <input type="button" value="<" id="left">
            <input type="button" value=">" id="right">
        </div>
        <div class="list">
            <span>0</span>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </div>
    </div>
</body>
<script src="../move.js"></script>
<script>

    // 1. 获取元素
    // 2. 设置初始索引：0

    // 左右按钮
    // 3. 绑定左右按钮的点击事件
    // 4. 计算索引：
        // 要进来的索引：左--，右++
        // 要离开的索引：左：当前+1，右：当前-1
    // 5. 根据离开的索引和进来的索引移动对应的图片

    // 分页器
    // 6. 绑定每个分页器按钮的索引
    // 7. 绑定每个分页器按钮的点击事件
        // 8. 获取要进来的索引：点击按钮的索引
        // 9. 获取要离开的索引：初始索引
        // 10. 根据点击的索引和初始索引的大小，确定动画的方向
        // 11. 根据离开的索引和进来的索引移动对应的图片
        // 12. 将本次点击的索引设置给初始索引（今天是明天的昨天）
    

    // function Banner(){
    //     // 1. 获取元素
    //     // ...
    //     // 2. 设置初始当前索引：0

    //     // 3. 绑定事件
    //     this.addEvent();
    // }
    // Banner.prototype.addEvent = function(){
    //     // 左按钮的点击事件
    //     // 右按钮的点击事件
    //     // 4. 计算索引
    //     this.changeIndexRight()
    // }
    // Banner.prototype.changeIndexRight = function(){
    //     // 计算
    //     // ...
    //     // 5. 根据离开的索引和进来的索引移动对应的图片
    //     this.changeImg();
    // }
    // Banner.prototype.changeImg = function(){
    //     // 切换图片
    // }

    function Banner(){
        // 1. 获取元素
        this.left = document.querySelector("#left");
        this.right = document.querySelector("#right");
        this.items = document.querySelectorAll(".item");
        this.pages = document.querySelectorAll(".list span");
        this.box = document.querySelector(".box");
        // 2. 设置初始当前索引：0
        this.index = 0;
        // 初始化布局
        this.init();

        // 6. 给每个分页器绑定索引
        this.addPageIndex();

        // 13. 自动播放
        this.autoPlay();

        // 3. 绑定事件
        this.addEvent();
    }
    Banner.prototype.autoPlay = function(){
        const that = this;
        let t = setInterval(()=>{
            this.changeIndexRight();
        },2000);

        this.box.onmouseenter = function(){
            clearInterval(t);
        }
        this.box.onmouseleave = function(){
            t = setInterval(()=>{
                that.changeIndexRight();
            },2000);
        }

    }
    Banner.prototype.addPageIndex = function(){
        for(let i=0;i<this.pages.length;i++){
            this.pages[i].index = i;
        }
    }
    Banner.prototype.init = function(){
        // 根据初始索引，初始化布局
        this.items[this.index].style.left = 0;
        this.pages[this.index].className = "active";
    }
    Banner.prototype.addEvent = function(){
        const that = this;
        // 左按钮的点击事件
        this.left.onclick = function(){
            // 4. 计算索引
            that.changeIndexLeft()
        }
        // 右按钮的点击事件
        this.right.onclick = function(){
            // 4. 计算索引
            that.changeIndexRight()
        }
        // 7. 给每个分页器绑定事件
        for(let i=0;i<this.pages.length;i++){
            this.pages[i].onclick = function(){
                // 8. 获取要进来的索引：点击按钮的索引：this.index
                // 9. 获取要离开的索引：初始索引：that.index
                // 10. 根据离开的索引和进来的索引的大小确定动画方向
                if(this.index > that.index){
                    // 11. 根据离开的索引和进来的索引移动对应的图片
                    that.changeImg(that.index, this.index, -1);
                }
                if(this.index < that.index){
                    that.changeImg(that.index, this.index, 1);
                }
                // 12. 将本次点击的索引设置给初始索引
                that.index = this.index;
            }
        }
    }
    Banner.prototype.changeIndexRight = function(){
        // 计算
        if(this.index === this.items.length-1){
            this.index = 0;
            this.prev = this.items.length-1;
        }else{
            this.index++;
            this.prev = this.index-1;
        }
        // 5. 根据离开的索引和进来的索引移动对应的图片
        this.changeImg(this.prev, this.index, -1);
    }
    Banner.prototype.changeIndexLeft = function(){
        // 计算
        if(this.index === 0){
            this.index = this.items.length-1;
            this.prev = 0;
        }else{
            this.index--;
            this.prev = this.index+1;
        }
        // 5. 根据离开的索引和进来的索引移动对应的图片
        this.changeImg(this.prev, this.index, 1);
    }
    Banner.prototype.changeImg = function(prev, now, d){
        // 切换图片
        // 要离开之前的位置
        this.items[prev].style.left = "0";
        // 离开到的位置
        move(this.items[prev], {
            left: 400 * d
        })
        // 要进来之前的位置
        this.items[now].style.left = d * -400 + "px";
        // 进来到的位置
        move(this.items[now], {
            left: 0
        })

        this.pages[prev].className = "";
        this.pages[now].className = "active";
    }

    new Banner();


    
    
</script>
</html>